<template>
  <div>
  <v-scale-screen width="1980" height="980" :fullScreen="true" style="background: white">
<!--  <dv-full-screen-container>-->
      <div class="container">
        <div class="header">
          <div class="header-item"></div>
          <div class="header-center ">
            能耗监控平台
          </div>
          <div class="header-right">
            <a style="margin-right:15px;color: aliceblue;font-family: 'Adobe 仿宋 Std R'" title="返回首页">
              <span class="el-icon-s-home" @click="showSetting" style="padding: 0 5px;"></span>
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            </a>
          </div>
        </div>
        <div class="main">
<!--          费用统计-->
          <div class="item bk">
            <CostStatistics ref="costStatisticsRef"></CostStatistics>
          </div>
          <div class="item center">
            <div class="top-list">
              <div class="top-list-item bk2" v-for="(item,index) in list" :key="index">
                <div class="top-list-item_title">
                  {{ item.name }}
                </div>
                <div class="top-list-item_content">
                  <span class="top-list-item_content_num">{{ item.num }} </span>
                  <span class="top-list-item_content_unit">{{ item.unit }}</span>
                </div>
              </div>
              <div class="map" style="width: 100%;height: 770px;position: relative;">
                <div id="mapContent" style="width: 100%;height: 770px;"></div>
                <div style="position: absolute;top: 20px;right: 20px;z-index: 99999;">
                  <el-radio-group v-model="type" size="mini" @change="handleTypeChange">
                    <el-radio-button label="电"></el-radio-button>
                    <el-radio-button label="水"></el-radio-button>
                    <el-radio-button label="气"></el-radio-button>
                    <el-radio-button label="热"></el-radio-button>
                  </el-radio-group>
                </div>
<!--                <baidu-map class="map" style="width: 100%; height: 100%" ak="TkofIykTX6CNXKIqPCS0If9ihdhWgKQz" :center="center" :zoom="12" :scroll-wheel-zoom="true" @ready="initBaiduMap" />-->
              </div>
            </div>

          </div>
<!--          采集设备-->
          <div class="item bk">
            <CollectingDevice ref="collectingDeviceRef"></CollectingDevice>
          </div>
<!--          租户用量排名-->
          <div class="item bk">
            <TenantUsageRanking ref="tenantUsageRankingRef"></TenantUsageRanking>
          </div>
<!--          分项统计-->
          <div class="item bk">
            <SubItemStatistics ref="subItemStatisticsRef"></SubItemStatistics>
          </div>
<!--          用量统计-->
          <div class="item bk">
            <UsageStatistics ref="usageStatisticsRef"></UsageStatistics>
          </div>
<!--          报警信息-->
          <div class="item bk">
            <AlarmMessage ref="alarmMessageRef"></AlarmMessage>
          </div>
        </div>
      </div>
    </v-scale-screen>
  </div>
<!--    </dv-full-screen-container>-->
</template>
<script>
import CostStatistics from "@/views/bigScreenNew/components/CostStatistics.vue";
import CollectingDevice from "@/views/bigScreenNew/components/CollectingDevice.vue";
import TenantUsageRanking from "@/views/bigScreenNew/components/TenantUsageRanking.vue";
import SubItemStatistics from "@/views/bigScreenNew/components/SubItemStatistics.vue";
import UsageStatistics from "@/views/bigScreenNew/components/UsageStatistics.vue";
import AlarmMessage from "@/views/bigScreenNew/components/AlarmMessage.vue";
import {formatTime } from '@/utils/timeUtils.js';
import electricityIcon from '@/assets/static/image/bigscreen/electricity.png'
import waterIcon from '@/assets/static/image/bigscreen/water.png'
import gasIcon from '@/assets/static/image/bigscreen/gas.png'
import heatIcon from '@/assets/static/image/bigscreen/heat.png'
import mapStyle from '@/assets/map/style.json'
import {getEnergyYearData,getAreaPointInMap} from '@/api/bigScreen'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  name: 'BigScreenNew',
  components: {
    CostStatistics,
    CollectingDevice,
    TenantUsageRanking,
    SubItemStatistics,
    UsageStatistics,
    AlarmMessage,
    // BaiduMap
  },
  data() {
    return {
      type: '电',
      map: '',
      center: '',
      list: [
        {name: '电', num: 0, unit: 'kwh'},
        {name: '水', num: 0, unit: '吨'},
        {name: '气', num: 0, unit: 'm³'},
        {name: '热', num: 0, unit: '吨'},
      ],
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //星期
      electricityMarkers: [
        { lng: 113.488697, lat: 23.178429, info: "至泰广场A7栋" },
        { lng: 113.488903, lat: 23.179106, info: "至泰广场A6栋" }
      ],
      waterMarkers: [
        { lng: 113.488903, lat: 23.179106, info: "至泰广场A6栋" },
      ],
      gasMarkers: [
        { lng: 113.491005, lat: 23.179936, info: "至泰广场A2栋" }
      ],
      heatMarkers: [
        { lng: 113.48911, lat: 23.179542, info: "至泰广场A5栋" },
      ],
      markerList: [],
      infoWindowList:[],
      timeoutId:null,
      dsqIndex:0,
    };
  },
  watch: {
    "infoWindowList" : {
      handler: function(data, oldVal) {
        if(this.timeoutId){
          clearTimeout(this.timeoutId);
          this.timeoutId = null;
          this.dsqIndex = 0;
        }
        if(data.length>0){
          this.timeoutId = setInterval(()=>{
            let obj = data[this.dsqIndex];
            this.map.openInfoWindow(obj.infoWindow, obj.point);
            if(this.dsqIndex < data.length-1){
              this.dsqIndex++;
            }else{
              this.dsqIndex = 0;
            }
          },10000,data);
        }
      },
      immediate: true
    }
  },
  computed: {

  },
  mounted() {
    this.getTime()
    this.initMap();
    this.getEnergyYearData();
    // var map = new T.Map('map',{
    //   projection: 'EPSG:4326',
    // });
    // map.centerAndZoom(new T.LngLat(116.397428, 39.90923), 12)
  },
  beforeDestroy() {

  },
  destroyed() {

  },
  methods: {
    getEnergyYearData(){
      getEnergyYearData(null).then(response => {
        if(response.code === 200) {
          this.list[0].num = response.data.elec;
          this.list[1].num = response.data.water;
          this.list[2].num = response.data.air;
          this.list[3].num = response.data.heat;
        }
      })
    },
    initMap() {
     this.map = new BMapGL.Map("mapContent"); // 初始化地图，创建Map实例。
      const point = new BMapGL.Point(113.489752,23.179077); // 创建点坐标
      this.map.centerAndZoom(point, 20); // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.map.setMapStyleV2({styleJson: mapStyle})
      this.addMarkers(1);
    },
    handleTypeChange() {
      this.clearMarkers();
      this.infoWindowList = [];
      switch (this.type) {
        case '电':
          this.addMarkers(1)
          break;
        case '水':
          this.addMarkers(2)
          break;
        case '气':
          this.addMarkers(3)
          break;
        case '热':
          this.addMarkers(4)
          break;
      }
    },
    addMarkers(energyType) {
      // 遍历 markers 数组添加标记点
      let energyIcon = electricityIcon;
      let unit = "Kw";
      if(energyType == 2){
        energyIcon = waterIcon;
        unit = "吨";
      } else if(energyType == 3){
        energyIcon = gasIcon;
        unit = "m³";
      } else if(energyType == 4){
        energyIcon = heatIcon;
        unit = "m³";
      } 
      const Icon = new BMapGL.Icon(
        energyIcon, new BMapGL.Size(38, 44)
      )

      getAreaPointInMap({energyType:energyType}).then(response => {
        if(response.code === 200) {
          if(response.data.length>=0){
            response.data.forEach(item => {
              const point = new BMapGL.Point(item.lng, item.lat);
              const marker = new BMapGL.Marker(point,{icon: Icon});
              //
              // // 将标记点添加到地图
              this.map.addOverlay(marker);

              // 可以添加自定义信息窗口
              if (item.info) {
                let opt = {
                  width: 200,
                  height: 100,
                  title: item.info +"-"+ this.type,
                  message: "",
                }
                var content = `
                <div class='boxs' style="background: transparent; color: #fff;padding: 0 15px">
                    <div style="padding: 2px 0;">累计用量:&nbsp;`+item.yearUse+unit+`</div>
                    <div style="padding: 2px 0;">本月用量:&nbsp; `+item.monthUse+unit+`</div>
                    <div style="padding: 2px 0;">上月环比:&nbsp; `+item.hb+`%</div>
                  </div>
                    `;
                const infoWindow = new BMapGL.InfoWindow(content,opt);
                this.map.openInfoWindow(infoWindow, point);
                marker.addEventListener("click", () => {
                  this.map.openInfoWindow(infoWindow, point);
                });
                this.infoWindowList.push({infoWindow:infoWindow,point:point});
              }
              // 保存标记点实例
              this.markerList.push(marker);
            });
          }
        }
      })
    },
    clearMarkers() {
      this.markerList.forEach(marker => {
        this.map.removeOverlay(marker);
      });
      this.markerList = [];
    },
    showSetting(){
      this.$router.push({
        path: "/index"
      });
    },
    // 获取当前时间
    getTime() {
      this.dateDay = formatTime(new Date(), "HH: mm: ss");
      this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
      this.dateWeek = this.weekday[new Date().getDay()];
    },
  }
}
</script>
<style src="../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
::v-deep .el-radio-button__inner{
  background: transparent !important;
  border: 1px solid #42b2fe !important;
  margin-left: -1px !important;
  color: #fff;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  color: #42b2fe;
}
::v-deep .map {
  .BMap_bubble_pop {
    background: rgba(48, 156, 255, 0.6) !important;
    border: 1px solid #51b6ff !important;
    color: #fff;
  }
  .BMap_bubble_title{
    width: 180px !important;
    text-align: center;
    color: #fff !important;
    font-weight: bold;
    font-size: 18px;
  }

  img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"] {
    content: url('');
  }
}

</style>
